<template>
    <div class="video-upload">
        <el-upload
                class="upload-demo"
                drag
                action="/api/video/upload"
                multiple
                :on-success="handleSuccess"
                :before-upload="beforeUpload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将视频文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">支持mp4/mov/avi格式，大小不超过500MB</div>
        </el-upload>

        <el-progress
                v-if="uploadProgress > 0"
                :percentage="uploadProgress"
                :status="uploadStatus">
        </el-progress>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                uploadProgress: 0,
                uploadStatus: null
            }
        },
        methods: {
            beforeUpload(file) {
                const isVideo = ['video/mp4', 'video/quicktime', 'video/x-msvideo'].includes(file.type);
                const isLt500M = file.size / 1024 / 1024 < 500;

                if (!isVideo) {
                    this.$message.error('只能上传视频文件!');
                }
                if (!isLt500M) {
                    this.$message.error('视频大小不能超过500MB!');
                }

                return isVideo && isLt500M;
            },
            handleSuccess(response, file, fileList) {
                this.$message.success('上传成功!');
                this.$emit('upload-success', response.data);
            }
        }
    }
</script>
